<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>员工显示</title>
<script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
	<!-- 搭建显示页面 -->
	<div class="container">
		<!-- 标题 -->
		<div class="row">
			<div class="col-md-12">
				<h1>SSM-CRUD</h1>
			</div>
		</div>
		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8">
				<button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
				<button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
			</div>
		</div>
		<!-- 显示表格数据 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover" id="emps_table">
					<thead>
						<tr>
							<th>
								<input type="checkbox" id="check_all"/>
							</th>
							<th>#</th>
							<th>empName</th>
							<th>gender</th>
							<th>email</th>
							<th>deptName</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${pageInfo.list}" var="emp">
					  <tr>
					    <th>
								<input type="checkbox" id="check_all"/>
							</th> 
						
							<th>${emp.empId }</th>
							<th>${emp.empName}</th>
							<th>${emp.gender=='M'?"男":"女"}</th>
							<th>${emp.email}</th>
							<th>${emp.department.deptName}</th>
							<th>
							<button class="btn btn-primary" ><span class="glyphicon glyphicon-pencil"></span>编辑</button>
							<button class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span>删除</button>
							</th>
					  </tr>
					  	</c:forEach>
					</tbody>
				</table>
			</div>
				<!-- 显示分页信息 -->
		<div class="row">
			<!--分页文字信息  -->
			<div class="col-md-6" id="page_info_area">
			当前第${pageInfo.pageNum }页，总共${pageInfo.pages }页,总${pageInfo.total }条记录数
			</div>
			<!-- 分页条信息 -->
			<div class="col-md-6" id="page_nav_area">
			<nav aria-label="Page navigation">
			  <ul class="pagination">
			     
			    <li><a href="emps?pn=1">首页</a></li>
			    <c:if test="${pageInfo.pageNum>1}">
			    <li>
			      <a href="emps?pn=${pageInfo.pageNum-1}" aria-label="Previous">
			        <span aria-hidden="true">&laquo;</span>
			      </a>
			    </li>
			    </c:if>
			    	<c:forEach items="${pageInfo.navigatepageNums}" var="page_num">
			    <c:if test="${page_num==pageInfo.pageNum}">
			    <li class="active"><a href="emps?pn=${page_num}" >${page_num}</a></li>
			    </c:if>
			       <c:if test="${page_num!=pageInfo.pageNum}">
			    <li><a href="emps?pn=${page_num}" >${page_num}</a></li>
			    </c:if>
			     </c:forEach>
			    <c:if test="${pageInfo.pageNum<pageInfo.pages}">
			    <li>
			      <a href="emps?pn=${pageInfo.pageNum+1}" aria-label="Next">
			        <span aria-hidden="true">&raquo;</span>
			      </a>
			    </li>
			    </c:if>
			    <li><a href="emps?pn=${pageInfo.pages}">末页</a></li>
			  </ul>
			</nav>
			</div>
		</div>
		</div>
</body>
</html>